<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的订单</h1>
		</header>
		<div class="mui-content" id="order_list">
			<div class="mui-card" id="order_list" v-for="order in list">
				<div class="mui-card-content" @click="open_order_detail(order.id)">
					<img :src="order.goodsPictures|stringToArray" style="width: 80px;height: 80px;float: left;padding: 10px;" />
					<div style="float: left;padding-top: 10px;">
						<div style="height: 70%;width: 200px;">{{order.goodsDes}}</div>
						<div style="color: red;font-weight: bold;">&yen;{{order.payment}}</div>
						<p>
							<span v-if="order.payStatus==20">【交易成功】</span>
							<span v-if="order.status==11 && order.payStatus==21">【交易关闭】</span>
							<span v-if="order.status==10">【正在进行】</span>
						</p>
					</div>
				</div>
				<div class="mui-card-footer" style="clear: both;">
					<span>{{order.createTime | date}}</span>
					<button v-if="order.status==11" @click="delete_order(order.id)">删除订单</button>
					<button v-if="order.status==10" @click="close_order(order.id)">关闭订单</button>
				</div>
			</div>

		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/const.js"></script>
		<script type="text/javascript" src="../js/request.js"></script>
		<script type="text/javascript" src="../js/order_service.js"></script>
		<script type="text/javascript">
			mui.init()

			Vue.filter("date", function(time) {
				var now = new Date(time);
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var date = now.getDate();
				var hour = now.getHours();
				var minute = now.getMinutes();
				var second = now.getSeconds();
				return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
			})
			Vue.filter("stringToArray", function(s) {
				var arr = s.split(",");
				arr = arr[0].replace(/\[|]/g, '');
				arr = arr.replace(/\"/g, "");
				return GOODS_IMG_PATH + '/' + arr;
			})

			var order = new Vue({
				el: '#order_list',
				data: {
					list: [],
					goodsImgPath: GOODS_IMG_PATH + '/',
				},
				methods: {
					open_order_detail: function(id) {
						var res = orderService.find_order(id);
						console.log(JSON.stringify(res.data));
						mui.openWindow({
							id: 'order.html',
							url: 'order.html',
							extras: {
								order: res.data,

							}
						});
					},
					delete_order: function(id) {
						var btnArray = ['取消', '确定'];
						mui.confirm('是否确定删除该订单？', '提示', btnArray, function(e) {
							if(e.index == 1) {
								var res = orderService.delete_order(id);
								plus.nativeUI.toast(res.msg);
								if(res.resultCode == REQUEST_SUCCESS_CDOE) {
									var res = orderService.find_list();
									order.list = res.data;
								}
							}
						})
					},
					close_order: function(id) {
						var btnArray = ['取消', '确定'];
						mui.confirm('是否关闭此订单？', '提示', btnArray, function(e) {
							if(e.index == 1) {
								var order = new Object();
								order.id =id;
								var res = orderService.close_order(order);
								plus.nativeUI.toast(res.msg);
								if(res.resultCode == REQUEST_SUCCESS_CDOE) {
									window.location.reload();
								}
							}
						})
					}
				},
			});

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				//添加hide事件
				self.addEventListener('hide', function(e) {
					window.scrollTo(0, 0); //滚到顶部
					data_detail.resetData(); //数据重置
				}, false);
				plus.nativeUI.showWaiting('加载中', {
					width: '100px',
					height: '100px'
				});
				//获取接口数据
				var res = orderService.find_list();
				//				console.log(JSON.stringify(res));
				order.list = res.data;
				plus.nativeUI.closeWaiting();

			});
		</script>
	</body>

</html>